<template>
	<div class="page list-page">
		<u-collapse v-if="list.length">
			<u-collapse-item v-for="(v, k) in list" :key="k">
				<view slot="title" class="item-hd" @click.stop="toPath(v)">
					<o-row justify="between" align="center" class="o-row">
						<o-col span="20" class="o-col title">
							<text class="key">商机名称：</text>
							<text class="val">{{ v.businessName }}</text>
						</o-col>
						<o-col span="4" class="o-col text-right">
							<u-tag plain size="mini" :type="$enum.status[v.checkStatus].type" :text="$enum.status[v.checkStatus].text"></u-tag>
						</o-col>
					</o-row>
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">金额：¥{{ v.money || '0.00' }}</o-col>
						<o-col span="12" class="o-col text-right">预计成交：{{ v.dealDate || '--' }}</o-col>
					</o-row>
				</view>
				<view class="item-bd">
					<o-row justify="between" class="o-row">
						<o-col span="12" class="o-col">创建人：{{ v.createUserName }}</o-col>
						<o-col span="12" class="o-col text-right">负责人：{{ v.ownerUserName }}</o-col>
					</o-row>
					<o-row class="o-row">客户名称：{{ v.customerName }}</o-row>
					<o-row class="o-row">更新时间：{{ v.updateTime }}</o-row>
					<o-row class="o-row">创建时间：{{ v.createTime }}</o-row>
				</view>
			</u-collapse-item>
		</u-collapse>
		<u-empty v-if="page >= 1 && !list.length" text="数据为空" mode="list"></u-empty>
		<u-loadmore v-else :status="loadStatus" />
	</div>
</template>

<script>
import oRow from '@/components/oveui-layout/o-row/o-row.vue';
import oCol from '@/components/oveui-layout/o-col/o-col.vue';
export default {
	components: { oRow, oCol },
	data: () => ({
		// 权限
		auth: {},
		// 类型 quotation 默认是列表；还有其他类型比如：待审核 unVerify
		type: 'quotation',
		// 第几页
		page: 1,
		// 每页显示数量
		limit: 10,
		// 列表数据
		list: [],
		// 底部加载状态
		loadStatus: 'loadmore',
		// 标题栏 和 接口变动参数
		barTitle: {
			all: { title: '全部商机', status_id: '' },
			business1: { title: '销售商机阶段', status_id: 1 },
			business3: { title: '技术方案阶段', status_id: 3 },
			business6: { title: '订单合同阶段', status_id: 6 },
		},
	}),
	methods: {
		async getAuth() {
			let auth = uni.getStorageSync('authList');
			if (auth.crm) {
				this.auth = auth.crm.business;
			}
		},
		// 获取列表
		async getList() {
			this.loadStatus = 'loading';
			let data = {
				page: this.page,
				limit: this.limit,
				type: 5,
				search: '',
			};
			// 根据type判断参数
			data.status_id = this.barTitle[this.type].status_id;
			let res = await this.$api.customer.business.list(data);
			if (res.code == 200) {
				let list = res.data.list || [];
				list.map((item) => {
					item.dealDate && (item.dealDate = item.dealDate.split(' ')[0]);
					return item;
				});
				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// list为空，说明没有更多数据了，显示没有更多数据的提示
				if (!list.length || (this.page == 1 && list.length <= res.data.totalRow)) {
					this.loadStatus = 'nomore';
				}
			}
		},
		// 跳转
		toPath(row) {
			uni.navigateTo({
				url: '/pages/customerManagement/businessShow/businessShow' + '?id=' + row.businessId,
			});
		},
		// 设置标题栏的标题
		setBarTitle() {
			uni.setNavigationBarTitle({
				title: this.barTitle[this.type].title,
			});
		},
	},
	computed: {},
	watch: {},

	// 周期函数--监听页面加载
	onLoad(option) {
		this.type = option.type;
	},
	// 周期函数--监听页面初次渲染完成
	onReady() {},
	// 周期函数--监听页面显示
	onShow() {
		this.setBarTitle();
		this.getAuth();
		this.getList();
	},
	// 周期函数--监听页面隐藏
	onHide() {},
	// 周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	async onPullDownRefresh() {
		this.page = 1;
		await this.getList();
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听用户上拉触底
	async onReachBottom() {
		this.page++;
		await this.getList();
	},
	// 监听自定义标题栏按钮事件
	onNavigationBarButtonTap(e) {
		if (!this.auth.save) {
			uni.showToast({
				icon: 'none',
				title: '权限不足',
			});

			return;
		}
		uni.navigateTo({
			url: e.url + '?params=add&status=' + this.barTitle[this.type].status_id,
		});
	},
	// 页面处理函数--监听页面滚动
	/* onPageScroll(event) {}, */
	// 页面处理函数--用户点击右上角分享
	/* onShareAppMessage(options) {}, */
};
</script>

<style lang="scss" scoped>
.u-collapse-item {
	position: relative;
	background: #fff;
	&:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		background: #e4e7ed;
		transform: scaleY(0.5);
	}
	.item-hd {
		width: 100%;
		margin: 0 13px;

		.o-row {
			margin: 0;
		}
		.o-row:last-child {
			margin-top: 10px;
			margin-bottom: 5px;
			color: $uni-color-subtitle;
			font-size: 12px;
		}
	}
	.item-bd {
		font-size: 14px;
		margin: 0 13px;
	}
	.o-row {
		margin: 8px 0;
		.o-col {
			.key,
			.val {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.title {
			height: 27px;
			line-height: 27px;
			.val {
				max-width: 175px;
				height: 27px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
